<template>
  <div class="outsides">
    <!-- 新增页 基础信息 -->

    <div class="header"></div>
    <div class="outside">
      <div class="left">
        <el-form
          ref="formEidt"
          :model="formEidt"
          :rules="rules"
          size="medium"
          label-width="100px"
        >
          <el-form-item label="订单类型:" prop="orderType">
            <el-select
              :style="{ width: '50%' }"
              v-model="formEidt.orderType"
              placeholder="请选择订单类型"
              clearable
            >
              <el-option
                v-for="dict in dict.type.project_order_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="项目名称：" prop="projectName">
            <el-input
              v-model="formEidt.projectName"
              placeholder="请输入法人项目名称"
              clearable
              :style="{ width: '50%' }"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="建设单位：" prop="constructionUnit">
            <el-input
              v-model="formEidt.constructionUnit"
              placeholder="请输入建设单位"
              clearable
              :style="{ width: '50%' }"
            >
            </el-input>
          </el-form-item>

          <el-form-item label="结构量：" prop="structCount">
            <el-input
              disabled
              v-model="formEidt.structCount"
              placeholder="结构量"
              clearable
              :style="{ width: '50%' }"
            >
            </el-input>
          </el-form-item>

          <div class="block">
            <el-form
              ref="formEidt"
              :model="formEidt"
              :rules="rules"
              size="medium"
              label-width="100px"
            >
              <el-form-item label="签订日期：" prop="signDate">
                <el-date-picker
                  disabled
                  v-model="formEidt.signDate"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  :style="{ width: '50%' }"
                  placeholder="年/月/日"
                  clearable
                ></el-date-picker>
              </el-form-item>
            </el-form>
          </div>

          <el-form-item label="对方单位：" prop="oppositeCompany">
            <el-input
              disabled
              v-model="formEidt.oppositeCompany"
              placeholder="请输入对方单位"
              clearable
              :style="{ width: '50%' }"
            >
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="right">
        <el-form
          ref="formEidt"
          :model="formEidt"
          :rules="rules"
          size="medium"
          label-width="130px"
        >
          <el-form-item label="合同编号" prop="ContractNumberVal">
            <el-select
              :style="{ width: '50%' }"
              v-model="ContractNumberVal"
              placeholder="合同编号"
            >
              <el-option
                v-for="(item, index) in ContractNumber"
                :key="index"
                :label="item.label"
                :value="item.contractName"
                @click.native="contractNameClick(ContractNumber[index])"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="项目简称：" prop="projectSname">
            <el-input
              v-model="formEidt.projectSname"
              placeholder="请输项目简称"
              clearable
              :style="{ width: '50%' }"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="联系人：" prop="contactPerson">
            <el-input
              v-model="formEidt.contactPerson"
              placeholder="请输入联系人"
              clearable
              :style="{ width: '50%' }"
            >
            </el-input>
          </el-form-item>

          <el-form-item label="经办人：" prop="operator">
            <el-input
              disabled
              v-model="formEidt.operator"
              placeholder="请输入经办人"
              clearable
              :style="{ width: '50%' }"
            >
            </el-input>
          </el-form-item>
          <div class="block" style="margin-left: 30px">
            <el-form
              ref="formEidt"
              :model="formEidt"
              :rules="rules"
              size="medium"
              label-width="100px"
            >
              <el-form-item label="开工时间：" prop="plannedStartTime">
                <el-date-picker
                  v-model="formEidt.plannedStartTime"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  :style="{ width: '50%' }"
                  placeholder="年/月/日"
                  clearable
                ></el-date-picker>
              </el-form-item>
            </el-form>
          </div>
          <el-form-item label="项目地址：" prop="projectAddr">
            <el-input
              disabled
              v-model="formEidt.projectAddr"
              placeholder="请输入项目地址"
              clearable
              :style="{ width: '50%' }"
            >
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <div
        class="blockstop"
        style="margin-top: 150px; height: 40px; width: 30%"
      >
        <el-form
          ref="elForm"
          :model="formEidt"
          :rules="rules"
          size="medium"
          label-width="100px"
        >
          <el-form-item label="联系电话：" prop="contactNumber">
            <el-input
              v-model="formEidt.contactNumber"
              placeholder="请输入联系电话："
              clearable
              :style="{ width: '50%' }"
            >
            </el-input>
          </el-form-item>
        </el-form>
      </div>

      <div class="blocks">
        <el-form
          ref="formEidt"
          :model="formEidt"
          :rules="rules"
          size="medium"
          label-width="100px"
        >
          <el-form-item label="交付时间：" prop="dueTime">
            <el-date-picker
              v-model="formEidt.dueTime"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :style="{ width: '100%' }"
              placeholder="年/月/日"
              clearable
            ></el-date-picker>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="footer">
      <el-form>
        <el-form-item size="large">
          <el-button @click="resetForm">取消</el-button>
          <el-button type="primary" @click="submitForm">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import {
  provinceAndCityData,
  regionData,
  provinceAndCityDataPlus,
  regionDataPlus,
  CodeToText,
  TextToCode,
} from "element-china-area-data";
import {
  getContractInfoList,
  getContractInfo,
  getFloorlist,
  listProjectInfo,
  getProjectInfo,
  delProjectInfo,
  addProjectInfo,
  getFloorLayer,
  updateProjectInfo,
} from "@/api/project/ProjectInfo";

// import {
//   listSupplier,
//   getSupplier,
//   delSupplier,
//   addSupplier,
//   updateSupplier,
// } from "@/api/supplier/supplier";
export default {
  dicts: ["project_status", "project_order_type"],
  components: {},
  props: [],
  // dicts: ["supplier_type", "partnership_level"],
  data() {
    return {
      // 下拉框的点击id
      ContractNumberIdList: {},
      // 合同信息
      ContractMessage: "",
      // 合同编号
      ContractNumber: [],
      ContractNumberVal: "",
      LouTable: [],
      queryParams: {
        projectNo: "",
        buildNo: "",
        compomentNo: "",
        compomentType: "",
      },

      formEidt: {
        orderType: "",
        contractNo: "",
        projectName: "",
        projectSname: "",
        structCount: 16,
        operator: "",
        projectAddr: "",
        oppositeCompany: "",
      },
      // 年月日
      Days: {
        field101: "2022-08-09",
      },

      // 省市区级联
      options: regionDataPlus,
      selectedOptions: [],

      listArray: [],

      formData: {
        orderType: "",
        contractNo: "",
        projectName: "",
        projectSname: "",
        structCount: 16,
        operator: "",
        projectAddr: "",
        oppositeCompany: "",
      },
      // 表单校验
      rules: {
        orderType: [
          { required: true, message: "订单类型不能为空", trigger: "blur" },
        ],
        projectName: [
          { required: true, message: "项目名称不能为空", trigger: "blur" },
        ],
        ContractNumberVal: [
          { required: true, message: "合同编号不能为空", trigger: "blur" },
        ],
        structCount: [
          { required: true, message: "结构量不能为空", trigger: "blur" },
        ],
        oppositeCompany: [
          { required: true, message: "对方单位不能为空", trigger: "blur" },
        ],
        projectAddr: [
          { required: true, message: "项目地址不能为空", trigger: "blur" },
        ],
      },

     
    };
  },
  computed: {},
  watch: {},
  created() {
    // 合同下拉框
    getContractInfoList().then((res) => {
      this.ContractNumber = res.rows;
      console.log("合同", this.ContractNumber);
     
    });
    getProjectInfo(this.$route.query.id).then((response) => {
      this.formEidt = response.data;
     
    });
   
  },
  mounted() {},
  methods: {
    // 表单重置
    reset() {
      this.formEidt = {
        orderType: null,
        projectName: null,
        constructionUnit: null,
        structCount: null,
        signDate: null,
        oppositeCompany: null,
        ContractNumberVal: null,
        projectSname: null,
        contactPerson: null,
        operator: null,
        plannedStartTime: null,
        projectAddr: null,
        contactNumber: null,
        dueTime: null,
      };
    },
    resetForm() {
      this.reset();
      const obj = {
        path: "/project/ProjectInfo",
        query: { t: Date.now(), pageNum: this.$route.query.pageNum },
      };
      this.$tab.closeOpenPage(obj);
      // this.$refs["form"].resetFields();
    },

    // 合同编号的下拉框点击事件
    contractNameClick(ContractNumberId) {
      getContractInfo(ContractNumberId.id).then((res) => {
        // this.ContractNumberIdList=res.data;
        this.formEidt.structCount = res.data.structCount;
        this.formEidt.operator = res.data.operator;
        this.formEidt.signDate = res.data.signDate;
        this.formEidt.oppositeCompany = res.data.oppositeCompany;
        this.formEidt.projectAddr = res.data.contractAddress;

        console.log("a", res.data);
      });
    },

    submitForm() {
      this.$refs["formEidt"].validate((valid) => {
        if (valid) {
          console.log("22222222222", this.formEidt);
          updateProjectInfo(this.formEidt).then((response) => {
            this.$modal.msgSuccess("修改成功");
            const obj = {
              path: "/project/ProjectInfo",
              query: { t: Date.now(), pageNum: this.$route.query.pageNum },
            };
            this.$tab.closeOpenPage(obj);
          });
        }
      });
    },

    // resetForm() {
    //   this.$refs["elForm"].resetFields();
    // },
  },
};
</script>
<style>
.blockstop {
  position: absolute;
  left: 1000px;
  top: 200px;
}
.blocks {
  margin-top: 230px;
  margin-right: 430px;
}
.outsides {
  margin-left: 17px;
}
.header {
  margin-top: 30px;
  margin-left: 30px;
}

.outside {
  width: 100%;
  display: flex;
  margin-top: 50px;
}
.left {
  width: 30%;
  margin-left: 100px;
  line-height: 100px;
}
.right {
  width: 30%;
  /* margin-right: 10px; */
  /* padding-left: 30px; */
  /* text-align: center; */
}
.footer {
  margin-top: 100px;
  text-align: center;
}
</style>
